import 'package:flutter/material.dart';
import 'package:provide/provide.dart';
import 'package:shopflutter/pages/details_page/details_bottom.dart';
import 'package:shopflutter/pages/details_page/details_explain.dart';
import 'package:shopflutter/pages/details_page/details_tabar.dart';
import 'package:shopflutter/pages/details_page/details_top_area.dart';
import 'package:shopflutter/pages/details_page/details_web.dart';
import 'package:shopflutter/provide/details_info.dart';

/// 商品详情页
class DetailsPage extends StatelessWidget {
  final String goodsId;

  DetailsPage({this.goodsId}) ;//新版flutter构造
  // DetailsPage({Key key, this.goodsId}) : super(key: key);//旧flutter构造

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(//图标按扭
            icon: Icon(Icons.arrow_back_ios),//返回上一级
            onPressed: () {//点击方法
              Navigator.pop(context);//返回上一级方法
              // Navigator.of(context).pop();//或者
            }),
        title: Text('商品详细页'),
      ),
      body: FutureBuilder(//异步加载数据
          future: _getBackInfo(context),//异步方法加载数据
          builder: (context, snapshot) {//snapshot返回的数据
            if (snapshot.hasData) {//snapshot.hasData有返回的数据
              return Stack(//层叠组件,组件需要定位
                children: <Widget>[
                  Container(
                    child: ListView(
                      children: <Widget>[
                        DetailsTopArea(),//顶部
                        DetailsExplain(),//中部说明
                        DetailsTabBar(),//购物车,购买
                        DetailsWeb(),//详情html
                      ],
                    ),
                  ),
                  Positioned(//定位,底部,左对齐(类似相对定位,浮动,用来做下方的购物车的tab栏)
                    child: DetailsBottom(),
                    bottom: 0,
                    left: 0,
                  ),
                ],
              );
            } else {
              return Center(
                child: Text("加载中"),
              );
            }
          }),
    );
  }
  //获取商品详情
  Future _getBackInfo(BuildContext context) async {
    await Provide.value<DetailsInfoProvide>(context).getGoodsInfo(goodsId);
    return '完成加载';//需要返回值,并且是Future,由于页面使用了Provide,所以....随便返回内容了
  }
}
